<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
        <el-breadcrumb-item>库存盘点</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>

    <el-table :data="tableData" height="425px" border style="width: 100%">
        <el-table-column fixed prop="productCode" label="产品编号" width="180"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="num" label="当前库存" width="180"></el-table-column>
        <el-table-column prop="poNum" label="采购在途数" width="180"></el-table-column>
        <el-table-column prop="soNum" label="预销售数" width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
                <el-button size="small" round type="danger" @click="checkStock(scope.row.productCode)">盘点</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="totalRecord"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[6,10,15,20]"
            @current-change="handleCurrentChange"
            @size-change="handleSize">
    </el-pagination>
    <el-dialog title="更新库存" :visible.sync="dialogFormVisible" width="500px" top="80px">
        <el-form label-width="80px" :model="form">
            <el-form-item label="变化数量:">
                <el-input v-model="form.changeNum" clearable placeholder="请输入变化数量" autocomplete="off"
                          style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="变化类型:">
                <el-select v-model="form.type" clearable placeholder="请选择变化类型" style="width: 200px">
                    <el-option value="损耗" label="损耗"></el-option>
                    <el-option value="盈余" label="盈余"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="损失原因:">
                <el-input type="textarea" rows="6" v-model="form.description"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="sureCheckStock()" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>


<script>
    window.onload = function () {

        let vm = new Vue({
            el: "#app",
            data: {
                labelPosition: "left",
                dialogFormVisible: false,
                tableData: [],  /*主页数据*/
                totalRecord: 0,
                currentPage: 1,
                pageSize: 6,

                form: {},
                payType: 1,
            },
            methods: {
                init: function () {
                    this.handleSelect(this.payType);
                },
                handleCurrentChange: function (val) {
                    this.currentPage = val;
                    this.handleSelect(this.payType);
                },
                handleSize: function (val) {
                    this.pageSize = val;
                    this.currentPage = 1;
                    this.handleSelect(this.payType);
                },
                handleSelect: function () {
                    debugger
                    let that = this;
                    axios.get("getProducts2?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(function (resp) {
                        that.tableData = resp.data.data.lists;
                        that.totalRecord = resp.data.data.totalRecord;
                    });
                },
                checkStock: function (productCode) {
                    this.dialogFormVisible = true;
                    this.productCode = productCode;
                },
                sureCheckStock: function () {
                    let that = this;
                    let CheckStock = {
                        productCode: this.productCode,
                        changeNum: this.form.changeNum,
                        type: this.form.type,
                        description: this.form.description
                    };
                    axios.post("checkStock", CheckStock).then(function (resp) {
                        if (resp.data.code == "200") {
                            that.$message({
                                message: '盘点成功！',
                                type: 'success'
                            });
                            that.cancel();
                            that.init();
                        } else {
                            that.$message({
                                message: '盘点失败！',
                                type: 'success'
                            });
                            that.cancel();
                            that.init();
                        }
                    });
                },
                closeBefore:function (){
                    this.cancel();
                },
                cancel:function (){
                    this.dialogFormVisible = false;
                    this.form.changeNum =this.form.type = this.form.description = "";
                }
            }
        });

        vm.init();
    }
</script>